<template>
    <div class="managerBlog">
        <div class="toolBar">
            <el-input v-model="keyword" @keydown.enter="getBLogList" clearable style="width:300px; margin-right:10px;" @clear="getBLogList" placeholder="关键字搜索" prefix-icon="Search"></el-input>
            <el-button type="danger" @click="removeBlog" icon="Delete">删除文章</el-button>
        </div>
        <el-table header-row-class-name="tableHeader" border stripe highlight-current-row :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="blogTitle" label="标题"/>
            <el-table-column prop="blogContent" show-overflow-tooltip label="描述"/>
            <el-table-column align="center" prop="viewCount" label="浏览量" width="80"/>
            <el-table-column align="center" prop="showStatus" label="状态" width="80">
                <template #default="scope">
                    <el-tag :type="scope.row.showStatus?'success':'error'">{{scope.row.showStatus?'正常':'异常'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="isTop" label="置顶" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.isTop?'success':'info'">{{scope.row.isTop?'置顶':'未置顶'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" width="200"/>
            <el-table-column align="center" prop="createTime" label="设置"  width="220">
                <template #default="scope">
                    <el-button @click="previewBLog(scope.row.id)" icon="View" round type="primary" size="small">预览</el-button>
                    <el-button @click="setting(scope.row)" icon="Setting" round type="info" size="small">设置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @current-change="goPage" hide-on-single-page small background layout="prev, pager, next" :total="total" />
        </div>
    </div>
</template>
<script>
import { listBlog, delBlog } from "../../js/blog"
export default {
    data(){
        return{
            tableData:[],
            keyword: '',
            previewBlogId: 0,
            pageNum: 1,
            total: 0,
            selectedIds:[]
        }
    },
    methods:{
        handleSelectionChange(){

        },
        previewBLog(id){
            console.log(id)
            this.$router.push('/viewBlog/'+id);
        },
        getBLogList(){
            listBlog({pageNum:this.pageNum,pageSize:10,keyword:this.keyword}).then(res=>{
                this.tableData = res.data.list
                this.total = res.data.total
            })
        },
        setting(data){
            this.$router.push({
                path: '/editBlog',
                query: {
                    id: data.id
                }
            })
        },
        goPage(currentPageNum){
            this.pageNum = currentPageNum;
            this.getBLogList();
        },
        handleSelectionChange(data){
            this.selectedIds = [];
            data.forEach(element => {
                this.selectedIds.push(element.id);
            });
        },
        removeBlog(){
            if(this.selectedIds.length==0){
                ElMessage({type:'warning',message:'请先选择要删除的博文'})
                return;
            }
            ElMessageBox.confirm('该操作将删除选中的博文信息，是否继续？','提示',{confirmButtonText:'确定',cancelButtonText:'取消'}).then(()=>{
                delBlog(this.selectedIds).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg})
                    if(res.status) this.getBLogList();
                })
            })
        }
    },
    mounted(){
        this.getBLogList();
    }
}
</script>